<template>
<div class="orderList">
    <headerNav title="我的订单"/>
    <div class="order-header">
        <van-tabs v-model="active" sticky @click="onClick">
            <van-tab title="待审核">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    >
                    <ul v-if="list.length">
                        <li class="item" v-for="item in list" v-bind:key="item">
                            <div class="title">{{item.orderDesc}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.orderTypeName}}</div>
                            <div class="product" v-for="(v, i) in item.orderDetailResultDtoList" :key="i">
                                <img :src="v.itemNarrowPic">
                                <div class="mid-r">
                                    <span>{{item.orderTime}}</span>
                                    <span>{{v.itemName}} X {{v.num}}</span>
                                    <span>¥ {{v.price}}</span>
                                    <span>分润方式:{{v.profitTypeName}} </span>
                                    <span>优惠金额:{{v.coupAmt}}</span>
                                    <span>获得积分:{{v.customerScore}}</span>
                                    <span>抵扣积分:{{v.scoreAmt}}</span>
                                </div>
                            </div>
                            <div class="price">
                                 <!-- <span>共{{item.orderDetailResultDtoList.length}}件商品</span>-->
                                <span>应收：¥ {{item.orderAmt}}</span>
                                <span>实收：<b>¥ {{item.actOrderAmt}}</b></span>
                            </div>
                            <div class="bottom">
                                <div class="cancle" @click="cancleOrder(item)">取消订单</div>
                            </div>
                        </li>
                    </ul>
                </van-list>
            </van-tab>
            <van-tab title="已审核">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    >
                    <ul v-if="list.length">
                        <li class="item" v-for="item in list" v-bind:key="item">
                            <div class="title">{{item.orderDesc}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.orderTypeName}}</div>
                            <div class="product" v-for="(v, i) in item.orderDetailResultDtoList" :key="i">
                                <img :src="v.itemNarrowPic">
                                <div class="mid-r">
                                    <span>{{item.orderTime}}</span>
                                    <span>{{v.itemName}} X {{v.num}}</span>
                                    <span>¥ {{v.price}}</span>
                                    <span>分润方式:{{v.profitTypeName}} </span>
                                    <span>优惠金额:{{v.coupAmt}}</span>
                                    <span>获得积分:{{v.customerScore}}</span>
                                    <span>抵扣积分:{{v.scoreAmt}}</span>    
                                </div>
                            </div>
                            <div class="price">
                                <!-- <span>共{{item.orderDetailResultDtoList.length}}件商品</span>-->
                                <span>应收：¥ {{item.orderAmt}}</span>
                                <span>实收：<b>¥ {{item.actOrderAmt}}</b></span>
                            </div>
                           <!-- <div class="bottom">
                                <div class="edit" @click="buyAgain(item)">再次购买</div>
                            </div>
                            -->
                        </li>
                    </ul>                    
                </van-list>
            </van-tab>
            <van-tab title="全部">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    >
                    <ul >
                        <li class="item" v-for="item in list" v-bind:key="item">
                            <div class="title">{{item.orderTypeName}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.orderStatusName}}</div>
                            <div class="product" v-for="(v, i) in item.orderDetailResultDtoList" :key="i">
                                <img :src="v.itemNarrowPic">
                                <div class="mid-r">
                                    <span>{{item.orderTime}}</span>
                                    <span>{{v.itemName}} X {{v.num}}</span>
                                    <span>¥ {{v.price}}</span>
                                    <span>分润方式:{{v.profitTypeName}} </span>
                                    <span>优惠金额:{{v.coupAmt}}</span>
                                    <span>获得积分:{{v.customerScore}}</span>
                                    <span>抵扣积分:{{v.scoreAmt}}</span>   
                                </div>
                            </div>
                            <div class="price">
                               <!-- <span>共{{item.orderDetailResultDtoList.length}}件商品</span>-->
                                <span>应收：¥ {{item.orderAmt}}</span>
                                <span>实收：<b>¥ {{item.actOrderAmt}}</b></span>
                            </div>
                            <div class="discount"></div>
                        </li>
                    </ul>
                </van-list>
            </van-tab>
        </van-tabs>

        
    </div>
</div>
</template>

<script>
import Vue from "vue"
import { findOrderByStatus, cancelOrder, findOrderByInviteUserNo, findOrderByRecvUserNo } from "../../../api/page.js";
import orderpage from "./orderpage";
import { Tab, Tabs, List } from 'vant';

Vue.use(Tab).use(Tabs).use(List);
export default {
    components:{
        orderpage
    },
    data(){
        return{
            loading: true,
            finished: false,

            active: "2",
            orderStatus: "",
            ORDERNAV : [
                {
                    'name': '待审核',
                    'id': "0"
                },
                {
                    'name': '已审核',
                    'id': "1"
                },
                {
                    'name': '全部',
                    'id': ""
                }
            ],  
            list:[],
            pageNum: 1,
            pageSize: 10,
            busy: false,
            tips: "页面正在加载中...",
            temp: false
        }
    },
    methods:{
        onLoad() {
            this.loading = true
            this.findOrderByStatus()
        },
        setOrderNavActive(index) {
            // 将状态存到vuex中
            this.$store.dispatch("setCityName", index);
            this.findOrderByStatus();
        },
        // 取消订单
        cancleOrder(item) {
            cancelOrder({
                orderNo: item.orderNo,
                shopNo: "S0001"
            }).then(res => {
                this.$toast({type: "success", message: "取消订单成功"})
                this.pageNum = 1
                this.list = []
                this.findOrderByStatus()
            })
        },
        buyAgain(item) {
            // this.$router.push("/detail?orderNo=" + item.orderNo)
        },
        // 状态区分,我的订单
        findOrderByStatus(){
            const from = this.$route.query.from || '',
                item = sessionStorage.getItem("customOrder") ? JSON.parse(sessionStorage.getItem("customOrder")) : null
            let paramsObj = {}
            if (item) {
                paramsObj = {
                    orderStatus:this.orderStatus,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    userNo: item.userNo
                }
            }
            if (from === "own") {//客户自己的订单
                 paramsObj.recvUserNo=item.userNo;
                 this._findOrderByRecvUserNo(paramsObj)
            } else if (from === "recommend") {//客户推荐订单
                 paramsObj.recvUserNo=item.userNo;
                 this._findOrderByInviteUserNo(paramsObj)
            } else {//当前登录账户下的订单
                this._myOrderList()
            }

        },
        // 我的订单
        _myOrderList() {
            findOrderByStatus({
                orderStatus:this.orderStatus,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }).then(res => {
                this.loading = false;
                if (res.data && res.data.list.length > 0) {
                    this.list = this.list.concat(res.data.list)
                }
                this.pageNum = this.pageNum + 1
                if ((res.data && res.data.list.length < 10) || !res.data) {
                    this.finished = true;
                }
            });
        },
        // 客户订单
        _findOrderByInviteUserNo(obj) {
            findOrderByInviteUserNo(obj).then(res => {
                this.loading = false;
                if (res.data && res.data.list.length > 0) {
                    this.list = this.list.concat(res.data.list)
                }
                this.pageNum = this.pageNum + 1
                if ((res.data && res.data.list.length < 10) || !res.data) {
                    this.finished = true;
                }
            });
        },
        // 客户推荐订单
        _findOrderByRecvUserNo(obj) {
            findOrderByRecvUserNo(obj).then(res => {
                this.loading = false;
                if (res.data && res.data.list.length > 0) {
                    this.list = this.list.concat(res.data.list)
                }
                this.pageNum = this.pageNum + 1
                if ((res.data && res.data.list.length < 10) || !res.data) {
                    this.finished = true;
                }
                // 数据全部加载完成
                if (res.data.list.length < 10) {
                    this.finished = true;
                }
            });
        },
        onClick(index) {
            this.active = index
            this.loading = true
            this.pageNum = 1
            this.list = []
            if (index === 0) {
                this.orderStatus = "0"
                this.findOrderByStatus()
            } else if (index === 1) {
                this.orderStatus = "1"
                this.findOrderByStatus()
            } else {
                this.orderStatus = ""
                this.findOrderByStatus()
            }
        },
        clickPage(){
            this.$router.push({ name: ""});
        }
    },
    mounted(){
        // 根据订单状态查询相应的数据
        const status = this.$route.query.type ? Number(this.$route.query.type) : ""
        if (status === 0) {
            this.orderStatus = "0"
            this.active = "0"
        } else if (status === 1) {
            this.orderStatus = "1"
            this.active = "1"
        } else {
            this.orderStatus = ""
            this.active = "2"
        }
        this.list = []
        this.findOrderByStatus()  
    },
}
</script>

<style lang="less" scoped>
.orderList{
    min-height: 100%;
    background-color: #F0F2F5;
}
.order-header {
    padding-top: 1.226667rem;
}
.tips {
    width: 100%;
    height: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.373333rem;
    color: #333;
}
.order-header {
    ul {
      height: 100%;
      background: #F7F7F7;
      width: 9.2rem;
      margin: 0 auto;
      li {
        position: relative;
        padding: 0.4rem;
        padding-top: 0.666667rem;
        box-sizing: border-box;
        border-radius: 0.266667rem;
        background: #fff;
        margin: 0.4rem auto;
        .title {
            color: #333;
            font-size: 0.4rem;
            font-weight: bold;
        }
        .product {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 0.266667rem 0;
            img {
                width: 2.133333rem;
                height: 2.133333rem;
                border-radius: 0.266667rem;
                margin-right: 0.346667rem;
            }
            .mid-r {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                width: 6.133333rem;
                span {
                    font-size: 0.32rem;
                    color: #333;
                    &:nth-child(1) {
                        position: absolute;
                        right: 0;
                        top: 0;
                        background: #FFF1EC;
                        font-size: 0.32rem;
                        color: #343434;
                        width: 3.253333rem;
                        height: 0.613333rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    &:nth-child(2) {
                        font-size: 0.32rem;
                        color: rgba(51, 51, 51, .7);
                        margin: 0.133333rem 0;
                    }
                    &:nth-child(3) {
                        font-size: 0.32rem;
                        font-weight: bold;
                    }
                }
            }
        }
        .price {
            color: rgba(51, 51, 51, .9);
            font-size: 0.32rem;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 0.453333rem;
            span:nth-child(2) {
                font-weight: bold;
                font-size: 0.4rem;
                color: #333;
                margin-left: 0.266667rem;
                b {
                    color: #FF561E;
                }
            }
        }
        .bottom {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .cancle {
                width: 2.56rem;
                height: 0.853333rem;
                border-radius: 0.426667rem;
                background: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #aaa;
                font-size: 0.4rem;
                border: 0.013333rem solid #AAAAAA;
            }
            .edit {
                width: 2.56rem;
                height: 0.853333rem;
                border-radius: 0.426667rem;
                background: #FF531A;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 0.4rem;
                margin-left: 0.4rem;
            }
        }
      }
    }
  }
</style>
